<template>
    <div class="profile-container">
      <!-- 上部分：头像和名字 -->
      <div class="profile-header">
        <img src="../../assets/top-bar/nav_user.png" alt="头像" class="avatar" />
        <div class="profile-info">
          <h3>{{ name }}</h3>
          <h4>{{ title }}</h4>
          <p class="signature">{{ signature }}</p>
        </div>
      </div>
  
      <!-- 下部分：水平分散排列的按钮 -->
      <div class="button-container">
        <el-button class="button-item" @click="handeJump('/WelcomeHome')">我的主页</el-button>
        <el-button class="button-item" @click="handeJump('/personalSetting')">个人中心</el-button>
        <el-button class="button-item" @click="goToMessages">我的消息</el-button>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        avatarUrl: '../../assets/top-bar/nav_user.png', // 替换为你的头像路径
        name: '尚华明',
        title: '研究员',
        signature: '你还没有设置签名!',
      };
    },
    methods: {
      goToHome() {
        console.log('跳转到我的主页');
        // 这里可以添加跳转逻辑
      },
      goToProfile() {
        console.log('跳转到个人中心');
        // 这里可以添加跳转逻辑
      },
      goToMessages() {
        console.log('跳转到我的消息');
        // 这里可以添加跳转逻辑
      },
      handeJump(path) {
        if (this.$route.path !== path) {
      this.$router.push(path);
    } else {
      console.log('Already on the target route, no need to navigate.');
    }
    },
    },
  };
  </script>
  
  <style scoped>
  .profile-container {
    /* width: 300px; 
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 20px;
    background-color: #f9f9f9; */
  }
  
  .profile-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }
  
  .avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-right: 15px;
  }
  
  .profile-info {
    flex-grow: 1;
  }
  
  .signature {
    color: #888;
  }
  
  .button-container {
    display: flex;
    justify-content: space-between; /* 水平分散排列 */
  }
  
  .button-item {
    flex: 1; /* 使按钮均匀分布 */
    /* 按钮间距 */
    /* margin: 0 5px;  */
  }
  </style>